import React, { ReactNode } from "react"
import { BrowserRouter, Routes, Route } from "react-router-dom"
import { HomePage, SignInPage, RegisterPage, DetailPage, SearchPage, ShoppingCart } from "./pages"
import { Navigate, Outlet } from "react-router-dom"
import useSelector from "./store/hooks"

interface PrivateRouteProp {
	isAuthenticated: boolean
}

const PrivateRoute: React.FC<PrivateRouteProp> = props => {
	console.log("props", props.isAuthenticated)
	// 也可以在PrivateRoute内部判断isAuthenticated(redux中的登录信息)
	const { isAuthenticated } = props

	return isAuthenticated ? <Outlet /> : <Navigate to="/signIn" />
}

function App() {
	return (
		<div>
			<BrowserRouter>
				<Routes>
					<Route path="/" element={<HomePage />} />
					<Route path="/signIn" element={<SignInPage />} />
					<Route path="/register" element={<RegisterPage />} />
					<Route path="/detail/:id" element={<DetailPage />} />
					<Route path="/search/:keywords" element={<SearchPage />} />
					{/* {路由守卫} */}
					<Route path="/auth" element={<PrivateRoute isAuthenticated={true} />}>
						<Route index element={<ShoppingCart />} />
					</Route>
					<Route path="*" element={<h1>404, 页面去火星了!</h1>} />
				</Routes>
			</BrowserRouter>
		</div>
	)
}

export default App
